<!-- 表单列表 -->
<template>
  <el-card class="hiss-form-search-card" shadow="hover">
    <div class="hiss-form-search">
      <el-row :gutter="10">
        <template v-for="(item, index) in tableField">
          <el-col
            :xs="10"
            :sm="8"
            :md="6"
            :lg="5"
            :xl="3"
            v-if="item.searchDisplay ? (isSearch = true) : false"
          >
            <el-form-item :label="item.fieldName + ':'">
              <el-input v-model="form['hf_' + item.controlId]" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :xs="8" :sm="7" :md="5" :lg="2" :xl="2" v-show="isSearch">
          <el-button type="primary" plain icon="Search" @click="handleSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-button
      type="primary"
      class="hiss-form-new-b"
      icon="Plus"
      @click="handleAdd"
      >新 增</el-button
    >
  </el-card>
  <el-table :data="tableData" border stripe style="width: 100%">
    <el-table-column type="index" width="80" label="序号" />
    <el-table-column
      v-for="(item, index) in tableField"
      :key="item.id"
      :prop="'hf_' + item.controlId"
      :label="item.fieldName"
      min-width="180"
    >
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button
          type="primary"
          link
          size="small"
          @click="handleDelete(scope.row)"
          >删除</el-button
        >
        <el-button
          type="primary"
          link
          size="small"
          @click="handleEdit(scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="hiss-page-body">
    <el-pagination
      v-model:current-page="page.current"
      v-model:page-size="page.pageSize"
      :page-sizes="[10, 20, 30, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="loadData"
      @current-change="loadData"
    />
  </div>
  <FormEditDialog
    ref="formDialog"
    :currentRoutePath="currentRoutePath"
    :loadData="loadData"
  ></FormEditDialog>
</template>

<script>
import {
  formActionDataList,
  formActionDelete,
  formActionFields,
} from "@/api/FormApi";
import FormEditDialog from "./components/FormEditDialog.vue";

export default {
  name: "FormDataList",
  components: { FormEditDialog },
  data() {
    return {
      integration: false,
      tempModelId: "",
      tempTenantId: "",
      currentRoutePath: "",
      isSearch: false,
      page: {
        pageSize: 10,
        current: 1,
        total: 0,
      },
      form: {},
      tableData: [],
      tableField: [],
      formData: {
        tableId: "",
        formId: "",
      },
    };
  },
  computed: {
    modelId() {
      return this.tempModelId || this.$route.params.id;
    },
    tenant() {
      return this.tempTenantId || this.$route.query.tenant;
    },
  },
  mounted() {
    let meta = this.$route.meta || {};
    this.integration = meta.integration || false;
    this.currentRoutePath = meta.currentRoutePath || "/fdl/:id";
    this.tempModelId = meta.id || "";
    this.tempTenantId = meta.tenant || "";
    this.loadField();
  },
  methods: {
    handleSearch() {
      let list = [];
      for (let i = 0; i < this.tableField.length; i++) {
        let field = this.tableField[i];
        let temp = {
          fieldName: "hf_" + field.controlId,
          fieldValue: this.form["hf_" + field.controlId],
          type: field.searchType,
        };
        if (temp.fieldValue) {
          list.push(temp);
        }
      }
      this.formData.search = list;
      this.loadData();
    },
    handleEdit(row) {
      const params = {
        modelId: "",
        formId: this.modelId,
        formConfig: {
          fields: [],
        },
        dataId: row.id,
      };
      this.$refs.formDialog.show(params);
    },
    handleDelete(row) {
      this.$messageBox
        .confirm("确认要删除该条数据吗？", "提示")
        .then(async () => {
          const params = {
            ...this.formData,
            dataId: row.id,
          };
          let res = await formActionDelete(params, {});
          if (res.success) {
            this.$notify.success({
              title: "提示",
              message: "删除成功！",
              showClose: false,
            });
            this.loadData();
          } else {
            this.$notify.error({
              title: "提示",
              message: "删除失败：" + res.errorMessage,
              showClose: false,
            });
          }
        })
        .catch(() => {});
    },
    handleAdd() {
      const params = {
        modelId: "",
        formId: this.modelId,
        formConfig: {
          fields: [],
        },
        dataId: null,
      };
      this.$refs.formDialog.show(params);
    },
    async loadField() {
      const params = {
        ids: this.modelId,
        tenantId: this.tenant,
      };
      let res = await formActionFields(params, {});
      if (res.success) {
        this.formData.formId = this.modelId;
        this.formData.tableId = res.data.result.id;
        this.tableField = res.data.result.fields;
        this.loadData();
      } else {
        this.$notify.error({
          title: "提示",
          message: "获取表单数据失败",
          showClose: false,
        });
      }
    },
    async loadData() {
      const params = {
        ...this.formData,
        ...this.page,
      };
      params.formId = this.modelId;

      let res = await formActionDataList(params, {});
      if (res.success) {
        this.tableData = res.data.result.data;
        this.page.total = res.data.result.total;
      } else {
        this.$notify.error({
          title: "提示",
          message: "获取表单数据失败",
          showClose: false,
        });
      }
    },
  },
};
</script>

<style scoped>
.hiss-form-search-card {
  margin-bottom: 18px;
}
.el-form-item {
  margin-bottom: 0px;
}
.hiss-form-new-b {
  float: right;
  margin-bottom: 18px;
}
.hiss-form-search {
  width: 90%;
  float: left;
  overflow: hidden;
  margin-bottom: 18px;
}
.hiss-page-body {
  margin: 15px 5px;
  text-align: right;
  overflow: hidden;
}
.hiss-page-body .el-pagination {
  float: right;
  overflow: hidden;
}
.hiss-form-title {
  float: left;
  height: 40px;
  line-height: 40px;
}
.hiss-form-config {
  float: right;
  font-size: 11px;
  font-weight: normal;
  color: #5e2a2d;
}
</style>
